<template>
	<view class="connectionBox">
		<u-navbar :bgColor="bgColor" title="联系看房" :titleStyle="titleStyle" leftIconColor="#ffffff"
			:autoBack="true"></u-navbar>
		<view class="" :style="{'height':globalData.navHeight-10 +'px'}"></view>

		<view class="inputBox">

			<view class="inputinner">
				<view class="lable">
					称呼
				</view>
				<view class="">
					<input class="inputItem" v-model="userName" type="text" placeholder="请输入" />
				</view>
			</view>


			<view class="inputinner">
				<view class="lable">
					手机号
				</view>
				<view class="">
					<input class="inputItem" v-model="mobile" type="number" placeholder="请输入手机号" />
				</view>
			</view>


		</view>

		<view class="btns" @click="$u.debounce(submitShowData, 1000)">
			确认提交
		</view>


		<u-modal :show="show" :title="title" :content='content' @confirm="handleClose" @cancel="handleClose"></u-modal>

	</view>
</template>

<script>
	import {
		houseShowhouse,
		config
	} from "@/api/api.js"
	var graceRichText = require("../../static/richText.js");
	export default {
		data() {
			return {
				bgColor: "#F8AD22",
				titleStyle: {
					color: "#ffffff",
					fontSize: "32rpx",
					fontFamily: "PingFang SC-Bold, PingFang SC",
					fontweight: "bold",
				},
				globalData: {
					statusBarHeight: 0, // 状态导航栏高度
					navHeight: 0, // 总体高度
					navigationBarHeight: 0, // 导航栏高度(标题栏高度)
				},
				show: false,
				title: '提交成功',
				content: '',
				pageId: "",
				userName: "",
				mobile: "",
				bgColor2: "#ffffff"

			}
		},
		onLoad(option) {
			console.log("option", option)
			this.pageId = option.id
			this.getNavbarHeight()
		},
		methods: {
			
			async submitShowData() {
				if (this.userName == "") {
					uni.showToast({
						title: '请输入称呼！',
						icon: "none",
						duration: 1000
					});
					return
				}
				if (this.mobile == "") {
					uni.showToast({
						title: '请输入手机号！',
						icon: "none",
						duration: 1000
					});
					return
				}
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.mobile) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					})
					return
				}
				if (!reg.test(this.mobile)) { //判断手机号格式时候正确
					uni.showToast({
						title: '手机号码不正确',
						icon: 'none'
					})
					return
				}
				let data = {
					id: this.pageId,
					name: this.userName,
					mobile: this.mobile
				}
				let res = await houseShowhouse(data)
				if (res.code == 1000) {
					this.show = true
					let ress = await config()
					this.content = graceRichText.format(ress.data[7].value)
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1000
					});
				}

			},

			handleClose() {
				this.show = false
				uni.navigateBack({
					delta: 1
				})
			},


			getNavbarHeight() {
				// 状态栏高度
				this.globalData.statusBarHeight = uni.getSystemInfoSync().statusBarHeight

				// #ifdef MP-WEIXIN
				// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
				const custom = wx.getMenuButtonBoundingClientRect()
				// console.log(custom)

				// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
				this.globalData.navigationBarHeight = custom.height + (custom.top - this.globalData.statusBarHeight) * 2
				// console.log("导航栏高度："+this.globalData.navigationBarHeight)

				// 总体高度 = 状态栏高度 + 导航栏高度
				this.globalData.navHeight = this.globalData.navigationBarHeight + this.globalData.statusBarHeight

				// #endif

				console.log("高度", this.globalData)

			},
		}
	}
</script>

<style scoped lang="scss">
	.connectionBox {
		width: 100%;
		height: 100vh;
		background-color: #ffffff;

		.inputBox {
			width: 640rpx;
			padding: 40rpx 0;
			box-sizing: border-box;
			margin: 0 auto;
			margin-top: 10rpx;

			.inputinner {
				margin-bottom: 40rpx;

				.lable {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 33rpx;
				}

				.inputItem {
					width: 640rpx;
					height: 88rpx;
					background: #F7F8FA;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					margin-top: 20rpx;
					text-indent: 30rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 88rpx;
					padding-left: 48rpx;
				}
			}
		}

		.btns {
			width: 640rpx;
			height: 88rpx;
			background: #F8AD22;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin: 0 auto;
			margin-top: 116rpx;
		}
	}
</style>